<template>
	<div class="register-container">
		<div class="register-box">
			<h2 class="register-title">用户注册</h2>
			<van-form @submit="onSubmit" class="register-form">
				<van-field label="用户名" v-model="regForm.name" type="text" placeholder="请输入用户名"
					:rules="[{ pattern: regNamePwd, required: true, message: '无效用户名' }]" class="register-field" />
				<van-field label="密码" v-model="regForm.password" type="password" placeholder="请输入密码"
					:rules="[{ pattern: regNamePwd, required: true, message: '无效密码' }]" class="register-field" />
				<van-field label="确认密码" v-model="regForm.password2" type="password" placeholder="请确认密码"
					:rules="[{ pattern: regNamePwd, required: true, message: '无效密码' }]" class="register-field" />
				<van-field label="邮箱" v-model="regForm.email" type="email" placeholder="请输入邮箱"
					:rules="[{ pattern: regEmail, message: '无效邮箱' }]" class="register-field" />
				<van-field label="电话" v-model="regForm.phone" type="tel" placeholder="请输入电话"
					:rules="[{ pattern: regPhone, message: '无效手机号码' }]" class="register-field" />
				<van-field name="radio" label="性别" class="register-field">
					<template #input>
						<van-radio-group v-model="regForm.gender" direction="horizontal">
							<van-radio :name="1">男</van-radio>
							<van-radio :name="0">女</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field label="昵称" v-model="regForm.nick_name" type="text" placeholder="请输入昵称"
					class="register-field" />
				<van-field name="uploader" label="头像" class="register-field">
					<template #input>
						<van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
					</template>
				</van-field>
				<div class="button-container">
					<van-button round block type="info" native-type="submit" class="submit-button">
						提交
					</van-button>
				</div>
			</van-form>
			<div class="content-padded">
				<p>注册成功后的用户可用于登录</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant';
	import {
		registerAPI,
		uploadAvatarAPI
	} from "@/api/user.js";
	import {
		setUserLocal
	} from '@/utils/auth';

	export default {
		data() {
			return {
				regForm: {
					name: "",
					password: "",
					password2: "",
					email: "",
					phone: "",
					gender: 1,
					avatar: "",
					nick_name: ""
				},
				avatarList: [],
				regNamePwd: /^[a-z0-9]{3,12}$/i,
				regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
				regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
			};
		},
		methods: {
			afterRead(file, detail) {
				file.status = 'uploading';
				file.message = '上传中...';
				uploadAvatarAPI(file, detail).then(result => {
					file.status = '';
					file.message = '';
					this.avatarList = [];
					this.avatarList.push({
						url: this.APIDomainName + result.url
					});
					this.regForm.avatar = result.url;
				});
			},
			onSubmit() {
				if (this.regForm.password !== this.regForm.password2) {
					showToast("密码两次输入不一致");
					return;
				}
				let user = this.regForm;
				delete user.password2;
				registerAPI(user).then(result => {
					setUserLocal(result.data.user);
					this.$router.push({
						name: "login"
					});
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	@bg-color: #f5f5f5;
	@primary-color: #007bff;
	@secondary-color: #e9ecef;
	@text-color: #333;
	@border-color: #ced4da;

	.register-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: @bg-color;
	}

	.register-box {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 30px;
		width: 400px;
	}

	.register-title {
		text-align: center;
		color: @text-color;
		margin-bottom: 20px;
		font-size: 24px;
	}

	.register-form {
		.register-field {
			margin-bottom: 15px;
			border-bottom: 1px solid @border-color;
			padding-bottom: 10px;

			.van-field__label {
				color: @text-color;
				font-weight: bold;
			}

			.van-field__control {
				color: @text-color;
			}
		}
	}

	.button-container {
		margin-top: 20px;
	}

	.submit-button {
		background-color: @primary-color;
		color: #fff;
		transition: background-color 0.3s ease;

		&:hover {
			background-color: darken(@primary-color, 10%);
		}
	}

	.content-padded {
		margin-top: 20px;
		text-align: center;
		color: @text-color;
	}
</style>